<template>
  <div class="contain">
    <div class="contain-login">
      <div>
        <div class="login-form">
          <div class="title">Web资源库-{{ action }}</div>
          <a-row class="row">
            <div class="border"></div>
          </a-row>
          <!--     注册     -->
          <template v-if="isRegister">
            <a-row class="row">
              <a-col :span="6">
                <div class="login-title">
                  <!--              <a-icon type="user" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">用户名：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input placeholder="请输入用户名" allowClear v-model="username"/>
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="6">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">密码：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input-password placeholder="请输入密码" allowClear v-model="password"/>
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="6">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->

                  <div class="row-title">确认密码：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input-password placeholder="请输入确认密码" allowClear v-model="passwordAgain"/>
              </a-col>
            </a-row>
          </template>
          <!--    找回密码      -->
<!--          <template v-else-if="isRetrieve">-->
<!--            <a-row class="row">-->
<!--              <a-col :span="5">-->
<!--                <div class="login-title">-->
<!--                  &lt;!&ndash;              <a-icon type="lock" :style="{ fontSize: '17px'}"/>&ndash;&gt;-->
<!--                  <div class="row-title">邮箱：</div>-->
<!--                </div>-->
<!--              </a-col>-->
<!--              <a-col :span="1"></a-col>-->
<!--              <a-col :span="14">-->
<!--                <a-input placeholder="请输入邮箱" allowClear v-model="email"/>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--            <a-row class="row">-->
<!--              <a-col :span="5">-->
<!--                <div class="login-title">-->
<!--                  &lt;!&ndash;              <a-icon type="lock" :style="{ fontSize: '17px'}"/>&ndash;&gt;-->
<!--                  <div class="row-title">验证码：</div>-->
<!--                </div>-->
<!--              </a-col>-->
<!--              <a-col :span="1"></a-col>-->
<!--              <a-col :span="8">-->
<!--                <a-input placeholder="请输入验证码" allowClear v-model="code"/>-->
<!--              </a-col>-->
<!--              <a-col :span="1"></a-col>-->
<!--              <a-col :span="4">-->
<!--                <a-button type="primary" @click="sendVerCode">发验证码</a-button>-->
<!--              </a-col>-->
<!--              <a-col :span="1"></a-col>-->
<!--            </a-row>-->
<!--            <a-row class="row">-->
<!--              <a-col :span="5">-->
<!--                <div class="login-title">-->
<!--                  &lt;!&ndash;              <a-icon type="lock" :style="{ fontSize: '17px'}"/>&ndash;&gt;-->
<!--                  <div class="row-title">新密码：</div>-->
<!--                </div>-->
<!--              </a-col>-->
<!--              <a-col :span="1"></a-col>-->
<!--              <a-col :span="14">-->
<!--                <a-input-password placeholder="请输入新密码" allowClear v-model="newPwd"/>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </template>-->
          <!--    登录      -->
          <template v-else>
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="user" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">用户名：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input placeholder="请输入用户名" allowClear v-model="username"/>
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">密码：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input-password placeholder="请输入密码" allowClear v-model="password"/>
              </a-col>
            </a-row>
          </template>
          <template>
            <a-row v-if="isRetrieve">
              <a-col :offset="18" :span="4">
                <div class="retrieve-pwd" title="返回登录" @click="returnLogin"> 返回登录</div>
              </a-col>
            </a-row>
            <a-row v-else-if="isRegister">
              <a-col :offset="18" :span="4">
                <div class="retrieve-pwd" title="注册账号" @click="returnLogin"> 返回登录</div>
              </a-col>
            </a-row>
            <a-row v-else>
              <a-col :offset="17" :span="4">
                <div class="retrieve-pwd" title="注册账号" @click="toRegister"> 注册账号</div>
              </a-col>
<!--              <a-col :span="4">-->
<!--                <div class="retrieve-pwd" title="找回密码" @click="toRetrieve"> 找回密码</div>-->
<!--              </a-col>-->
            </a-row>
          </template>
          <a-row class="row btn-margin">
            <div>
              <template>
                <a-button type="primary" @click="retrievePwd" v-if="isRetrieve">找回</a-button>
                <a-button type="primary" @click="registerUser" v-else-if="isRegister">注册</a-button>
                <a-button type="primary" @click="login" v-else>登录</a-button>
              </template>
              <a-button class="btn-space" @click="reset">重置</a-button>
            </div>
          </a-row>
        </div>
      </div>
    </div>
<!--    <div class="footer">-->
<!--      <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">粤ICP备2021019241号-1</a>-->
<!--    </div>-->
  </div>
</template>

<script>
   import {loginUser,registerUser} from '../api/index';
  // import Cookies from 'js-cookie';

  export default {
    name: "Login.vue",
    data(){
      return{
        username: '',
        password: '',
        email: '',    //邮箱
        code: '',     //验证码
        newPwd: '',   //新密码
        passwordAgain: '',  //确认密码
        isRetrieve: false,
        isRegister: false,
        action: '登录',
      //  verificationCode: '',     //验证码值
       // code: '',                 //验证码输入框
      //  isAutoLogin: false        //是否自动登录
      }
    },
    created() {
      //自动登录
      // this.autoLogin();
      //生成验证码
      // this.generateVerifyCode();
    },
    methods: {
      //注册账号
      registerUser() {
        let userName = this.username
        let pwd = this.password
        let pwd2 = this.passwordAgain
        if (userName && pwd && pwd2) {
          if (pwd === pwd2) {
            let params = {
              userName: userName,
              userPassword: pwd,
              userConfirmPassword: pwd2
            }
            registerUser(params)
                .then((res) => {
                  if (res.status === 200){
                    this.$message.success('注册成功！');
                    this.returnLogin()
                  }else{
                    this.$message.info(res.msg);
                  }
                })
                .catch((err) => {
                  this.username = ''
                  this.password = ''
                  this.passwordAgain = ''
                  this.$message.error("用户名或密码错误！");
                })
          } else {
            this.$message.info("两次密码不一致，请重新输入");
          }
        }else {
          this.$message.info("用户密码不能为空，请重新输入");
        }
      },
      //登录
      login(){
        if (this.username && this.password){
          let params = {
            userName: this.username,
            userPassword: this.password
          }
          loginUser(params)
            .then((res) => {
              if (res.status == 200){
                window.localStorage.setItem('userId', res.data.userId)
                window.localStorage.setItem('userName', res.data.userName)
                window.localStorage.setItem('avatar', res.data.userFace)
                window.localStorage.setItem('token',res.data.userUniqueToken)
                if(res.data.userRealname) {
                  this.$message.success('登录成功！');
                  if (res.data.userName === 'admin') {
                    this.$router.replace('/admin-index')
                  } else {
                    this.$router.replace('/index')
                  }
                } else {
                  this.$message.success('登录成功，请先完善个人信息！');
                  this.$router.push('/improve-info')
                }
              }else{
                this.$message.info(res.msg);
              }
            })
            .catch((err) => {
              this.username = ''
              this.password = ''
              this.$message.error(err);
            })
          }else {
          this.$message.info('用户名跟密码不能为空！');
         }
      },
      //发送验证码到邮箱
      // sendVerCode(){
      //   let params = {};
      //   var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
      //   if (this.email){
      //     if(regex.test(this.email)){
      //       //邮箱格式正确
      //       params = {
      //         email: this.email
      //       }
      //       sendCode(params)
      //         .then((res) => {
      //           if (res.status == 10000){
      //             this.$message.success("已发送验证码至邮箱，请前往邮箱查看验证码！");
      //           }else if(res.status == 10009){
      //             this.$message.info(res.msg);
      //             window.localStorage.removeItem('username')
      //             window.localStorage.removeItem('password')
      //             window.localStorage.removeItem('token')
      //             document.cookie = `accessToken=; expires=${new Date(0).toGMTString()}`
      //             this.$router.replace({path: '/',replace:true})
      //           }else{
      //             this.$message.info(res.msg);
      //           }
      //         })
      //         .catch((err) => {
      //           this.$message.error("对不起，没有用户绑定过该邮箱！");
      //         })
      //     }else{
      //       this.$message.error("邮箱地址格式错误，请重新输入！");
      //     }
      //   }else{
      //     this.$message.info("邮箱不能为空！");
      //   }
      // },
      //找回密码
      retrievePwd(){
        if (this.code && this.newPwd && this.email){
          // let params = {
          //   email: this.email,
          //   code: this.code,
          //   password: this.newPwd
          // }
          // findPwd(params)
          //   .then((res) => {
          //     if (res.status == 10000){
          //       this.$message.success("修改密码成功！");
          //       this.isRetrieve = false
          //     }else if(res.status == 10009){
          //       this.$message.info(res.msg);
          //       window.localStorage.removeItem('username')
          //       window.localStorage.removeItem('password')
          //       window.localStorage.removeItem('token')
          //       document.cookie = `accessToken=; expires=${new Date(0).toGMTString()}`
          //       this.$router.replace({path: '/',replace:true})
          //     }else{
          //       this.$message.info(res.msg);
          //     }
          //   })
          //   .catch((err) => {
          //     this.$message.error("验证码错误！");
          //   })
        }else{
          this.$message.info("信息不能为空，请重新输入！");
        }
      },
      //返回登录状态
      returnLogin(){
        this.email = ''
        this.newPwd = ''
        this.code = ''
        this.password = ''
        this.isRetrieve = false
        this.isRegister = false
        this.action = '登录'
      },
      //切换成找回密码状态
      toRetrieve(){
        this.password = ''
        this.username = ''
        this.isRetrieve = true
        this.action = '找回密码'
      },
      //切换成注册状态
      toRegister() {
        this.password = ''
        this.username = ''
        this.isRegister = true
        this.action = '注册'
      },
      //重置
      reset(){
        this.username = ''
        this.password = ''
        this.code = ''
        this.newPwd = ''
        this.email = ''
      }

    }
  }
</script>

<style scoped>
  .contain{
    width: 100%;
    height: 100%;
    /*background-image: url("../assets/sky2.jpg");*/
    /*background-position: center center;*/
    /*background-size:cover;*/
    background: #1bcbb4;

  }
  .contain-login{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .login-form{
    width: 430px;
    background: rgba(255,255,255,1);
    padding: 10px;
    margin-top: 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /*margin: auto;*/
    /*align-items: center;*/
  }
  .title{
    color: #1bcbb4;
    font-weight: 600;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 5px;
    text-align: center;
  }
  .border{
    background: #1bcbb4;
    width: 100px;
    height: 2px;
    margin-bottom: 20px;
  }
  .login-title{
    display: flex;
    flex-direction: row;
    justify-content: right;
    justify-items: right;
    align-items: center;
    padding: 5px;
  }
  .row{
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: center;
    margin-bottom: 15px;
  }
  .row-title{
    font-size: 16px;
  }
  .vertify{
    /*background-image: url("../assets/vertify_code.jpg");*/
    width: 60px;
    height: 80%;
    font-size: 22px;
    vertical-align: middle;
    cursor: pointer;
    /*height: 50px;*/
  }
  .btn-space{
    margin-left: 80px;
  }
  .btn-margin{
    margin-top: 30px;
  }
  .beian{
    text-decoration: none;
    cursor: pointer;
    color: #efefef;
    width: 100%;
    height: 5%;
  }
  .beian:hover{
    color: #ffffff;
  }
  .retrieve-pwd{
    color: #666;
    font-size: 13px;
  }
  .retrieve-pwd:hover{
    cursor: pointer;
    color: #001529;
    /*text-align: right;*/
  }
  .vertify{
    background-image: url("../assets/vertify_code.jpg");
    width: 60px;
    height: 80%;
    font-size: 22px;
    vertical-align: middle;
    cursor: pointer;
    /*height: 50px;*/
  }
</style>
